<template>
		<view class="content">
			<view class="wrap">
				<u-swiper :list="list"></u-swiper>
			</view>
			<view class="grid">
				<u-grid :col="4" :border="false">
					<u-grid-item v-for="(item,index) in grid" :key="index">
						<image :src="item.image" mode=""></image>
						<view class="grid-text">{{item.text}}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- 设计案例 -->
			<view class="case">
				<titlle title1="设计案例" title2=" | DESIGN WORKS"></titlle>
				<view class="pic-img" v-for="(item,index) in pic" :key="index">
					<image :src="item.image" mode="" />
					<view class="pic-word">{{item.text}}</view>
				</view>
			</view>
			<!-- 分割线 -->
			<line1></line1>
			<!-- 设计师推荐 -->
			<view class="designers">
				<titlle title1="设计师推荐" title2=" | RECOMMENDED DESIGNER"></titlle>
				<view class="per">
					<view class="per-pic" v-for="(item,index) in person" :key="index">
						<image :src="item.image" mode="" />
						<view>{{item.text1}}</view>
						<view>{{item.text2}}</view>
					</view>
				</view>
			</view>
			<!-- 分割线 -->
			<line1></line1>
			<!-- 良心工艺 -->
			<view class="craft">
				<titlle title1="良心工艺" title2=" | CONSCIENCE CRAFT"></titlle>
				<view class="craft-box">
					<view class="craft-left">
						<image src="/static/gy1.png" mode="" />
						<view class="craft-word">水电工艺</view>
					</view>
					<view class="craft-right">
						<view class="right" v-for="(item,index) in tech" :key="index">
							<image :src="item.image" mode="" />
							<view class="craft-word">{{item.text}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 分割线 -->
			<line1></line1>
			<!-- 业主故事 -->
			<view class="story">
				<titlle title1="业主故事" title2=" | OWNER`S STORY"></titlle>
				<view class="story-box">
					<view class="story-left" v-for="(item,index) in owner" :key="index">
						<image :src="item.image" mode="" />
						<view class="story-word">{{item.text}}</view>
					</view>
				</view>
			</view>
			<!-- 分割线 -->
			<line1></line1>
			<!-- 大业荣誉 -->
			<view class="honor">
				<titlle title1="大业荣誉" title2=" | HONOR"></titlle>
				<view class="honor-pic" v-for="(item,index) in hon" :key="index">
					<image :src="item.image" mode="" />
					<view class="honor-word">{{item.text}}</view>
				</view>
			</view>
			<!-- 大业美家 -->
			<view class="us">
				<titlle title1="大业美家" title2=" | ABOUT US"></titlle>
				<view class="us-box">
					<view class="us-four" v-for="(item,index) in about" :key="index">
						<image :src="item.image" mode="" />
						<view class="us-word">
							<view>{{item.text1}}</view>
							<view>{{item.text2}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 全过程服务体系 -->
			<view class="service">
				<view class="ser-box">
					<image src="/static/办公.png" mode="" />
					<view class="ser-word">
						<view class="text">service</view>
						<view class="text">全过程服务体系</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="service-loop">
					<u-grid :col="3" class="block" :border="false">
						<u-grid-item v-for="(item,index) in info" :key="index" bg-color="#efefef">
							<image :src="item.image" mode=""></image>
							<view class="ser-text">{{item.text}}</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<!-- 预约装修 -->
			<room1></room1>
			<!-- 底部 -->
			<foot1></foot1>
		</view>
</template>

<script>
	import titlle from "../../compoents/title1/title1.vue"
	import line1 from "../../compoents/line/line.vue"
	import room1 from "../../compoents/room/room.vue"
	import foot1 from "../../compoents/foot/foot.vue"
	export default {
		components: {
			titlle,
			line1,
			room1,
			foot1
		},
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				grid: [{
					image: '../../../static/装修报价.png',
					text: '装修报价',
				}, {
					image: '../../../static/设计师.png',
					text: '设计师',
				}, {
					image: '../../../static/设计案例.png',
					text: '设计案例',
				}, {
					image: '../../../static/总裁.png',
					text: '关于总裁',
				}, {
					image: '../../../static/独立体系.png',
					text: '全案体系',
				}, {
					image: '../../../static/工程.png',
					text: '良心工程',
				}, {
					image: '../../../static/环保.png',
					text: '极致环保',
				}, {
					image: '../../../static/服务.png',
					text: '客户服务',
				}],
				pic: [{
					image: '/static/sn1.png',
					text: "鑫湖一号 | 400平方米 | 现代简约"
				}, {
					image: '/static/sn2.png',
					text: "高尔夫别墅 | 400平方米 | 现代简约"
				}],
				person: [{
						image: "/static/r1.png",
						text1: "王艺哲",
						text2: "郑州分公司设计总监"
					},
					{
						image: "/static/r2.png",
						text1: "张猛",
						text2: "沈阳分公司设计总监"
					},
					{
						image: "/static/r3.png",
						text1: "艾武",
						text2: "北京分公司设计总监"
					}
				],
				tech: [{
						image: "/static/gy2.png",
						text: "木工工程"
					},
					{
						image: "/static/gy3.png",
						text: "瓦工工艺"
					},
					{
						image: "/static/gy4.png",
						text: "油工工艺"
					},
					{
						image: "/static/gy5.png",
						text: "文明施工"
					}
				],
				owner: [{
						image: "/static/dy1.png",
						text: "半山壹号 | 张女士"
					},
					{
						image: "/static/dy2.png",
						text: "首开琅樾 | 白女士"
					}
				],
				hon: [{
					image: "/static/hon1.png",
					text: "硕果累累 | 初心不忘 以行践言"
				}],
				about: [{
						image: "/static/us1.png",
						text1: "9年专注",
						text2: "做别墅大宅设计"
					},
					{
						image: "/static/us2.png",
						text1: "布局12座",
						text2: "核心城市"
					},
					{
						image: "/static/us3.png",
						text1: "12家",
						text2: "直营分公司"
					},
					{
						image: "/static/us4.png",
						text1: "8500个家庭",
						text2: "的一致选择"
					}
				],
				info: [{
						image: "/static/客户.png",
						text: "客户管家"
					},
					{
						image: "/static/微信.png",
						text: "微信服务群"
					},
					{
						image: "/static/总裁 (1).png",
						text: "总裁办回访"
					},
					{
						image: "/static/巡检.png",
						text: "总经理每周巡检"
					},
					{
						image: "/static/交流.png",
						text: "感恩行&美家会"
					},
					{
						image: "/static/VIP.png",
						text: "终身维修"
					}
				],
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 95%;
		margin: 0 auto;

		.wrap {
			padding: 10rpx 0;
		}

		// 宫格
		.grid {
			image {
				width: 40rpx;
				height: 40rpx;
			}

			.grid-text {
				font-size: 28rpx;
				margin-top: 4rpx;
			}
		}

		// 设计案例
		.case {
			margin-top: 20rpx;

			.pic-img {
				position: relative;

				image {
					width: 100%;
					margin-top: 15rpx;
					height: 370rpx;
				}

				.pic-word {
					background-color: rgba(0, 0, 0, 0.5);
					color: white;
					position: absolute;
					bottom: 7rpx;
					width: 100%;
					padding: 0 10rpx;
					box-sizing: border-box;
					font-size: 27rpx;
					line-height: 50rpx;
				}
			}
		}

		// 设计师推荐
		.designers {
			width: 100%;

			.per {
				text-align: center;
				display: flex;
				justify-content: space-between;

				.per-pic {
					width: 30%;
					background-color: #efefef;

					image {
						width: 100%;
						height: 300rpx;
					}

					.per-pic view:nth-child(2) {
						font-size: 25rpx;
						margin: 10rpx 0;
					}

					.per-pic view:nth-child(3) {
						font-size: 23rpx;
						margin: 10rpx 0;
						color: #878787;
					}
				}
			}
		}

		// 良心工艺
		.craft {
			width: 100%;

			.craft-box {
				display: flex;
				justify-content: space-between;

				.craft-left {
					width: 48%;
					position: relative;

					image {
						width: 100%;
						height: 435rpx;
					}

					.craft-word {
						background-color: rgba(0, 0, 0, 0.5);
						color: white;
						position: absolute;
						top: 0;
						padding: 0 15rpx;
						font-size: 27rpx;
						line-height: 50rpx;
					}
				}

				.craft-right {
					width: 48%;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.right {
						width: 48%;
						position: relative;

						image {
							width: 100%;
							height: 215rpx;
						}

						.craft-word {
							background-color: rgba(0, 0, 0, 0.5);
							color: white;
							position: absolute;
							top: 0;
							padding: 0 15rpx;
							font-size: 27rpx;
							line-height: 50rpx;
						}
					}
				}
			}
		}

		// 业主故事
		.story {
			width: 100%;

			.story-box {
				display: flex;
				justify-content: space-between;

				.story-left {
					width: 48%;
					position: relative;

					image {
						width: 100%;
						height: 300rpx;
					}

					.story-word {
						background-color: rgba(0, 0, 0, 0.5);
						color: white;
						position: absolute;
						bottom: 7rpx;
						width: 100%;
						padding-left: 10rpx;
						box-sizing: border-box;
						font-size: 27rpx;
						line-height: 50rpx;
					}
				}
			}
		}

		// 大业荣誉
		.honor {
			width: 100%;
			position: relative;
			margin-bottom: 30rpx;

			.honor-pic {
				image {
					width: 100%;
					height: 400rpx;
				}

				.honor-word {
					background-color: rgba(0, 0, 0, 0.5);
					color: white;
					position: absolute;
					bottom: 7rpx;
					width: 100%;
					padding-left: 10rpx;
					box-sizing: border-box;
					font-size: 27rpx;
					line-height: 50rpx;
				}
			}
		}

		// 大业美家
		.us {
			width: 100%;
			margin-bottom: 40rpx;

			.us-box {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.us-four {
					width: 49%;
					display: flex;
					justify-content: space-between;
					box-shadow: 2rpx 2rpx 7rpx #ADADAD;
					margin-bottom: 20rpx;

					image {
						width: 45%;
						height: 150rpx;
					}

					.us-word {
						width: 60%;
						padding-left: 10rpx;

						view:nth-child(1) {
							font-size: 24rpx;
							font-weight: bold;
							margin: 30rpx 0 10rpx 0;
						}

						view:nth-child(2) {
							font-size: 24rpx;
						}
					}
				}
			}
		}

		// 全过程服务体系
		.service {
			width: 100%;
			margin-top: 20rpx;
			background-color: #efefef;

			.ser-box {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 13%;
					height: 70rpx;
				}

				.text {
					text-align: center;
					font-weight: bold;
					color: #4c4948;
				}
			}

			.line {
				width: 80%;
				margin: auto;
				border-top: 3rpx solid #cccccc;
			}

			.service-loop {
				.block {
					margin-bottom: 32rpx;

					image {
						width: 60rpx;
						height: 60rpx;
					}

					.ser-text {
						font-size: 30rpx;
					}
				}
			}
		}
	}
</style>